<template>
  <!-- 生产单管理 -->
  <el-container>
    <el-header>
      <div class="left-panel">
        <el-button
          type="primary"
          @click="handleProduction"
          v-auth-button="['production/produceOrderManagement']"
          :disabled="selection.length == 0"
          >排产</el-button
        >
        <!-- <el-button
          type="primary"
          @click="handleProductionOut"
          v-auth-button="['productionOut/produceOrderManagement']"
          :disabled="selection.length == 0"
          >外发</el-button
        > -->
      </div>
      <div class="right-panel">
        <div class="right-panel-search">
          <!-- <el-input
            v-model="searchValue.search"
            placeholder="生产单名称"
            clearable
          ></el-input> -->
          <el-input
            v-model="searchValue.customerName"
            placeholder="客户名称"
            clearable
          ></el-input>
          <el-select
            v-model="searchValue.type"
            placeholder="请选择生产状态"
            style="width: 100%"
            clearable
          >
            <el-option label="待生产" :value="0" />
            <el-option label="生产中" :value="1" />
            <el-option label="生产完成" :value="2" />
          </el-select>
          <el-select
            v-model="searchValue.businessAdminId"
            placeholder="请选择业务员"
            style="width: 100%"
            clearable
          >
            <el-option
              v-for="item in userList"
              :key="item.id"
              :label="item.username"
              :value="item.id"
            />
          </el-select>
          <el-date-picker
            v-model="searchValue.startTime"
            type="date"
            placeholder="选择开始日期"
            value-format="YYYY-MM-DD"
            style="width: 100%"
          >
          </el-date-picker>
          <el-date-picker
            v-model="searchValue.endTime"
            type="date"
            placeholder="选择结束日期"
            value-format="YYYY-MM-DD"
            style="width: 100%"
          >
          </el-date-picker>
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="upsearch"
          ></el-button>
        </div>
      </div>
    </el-header>
    <el-main class="nopadding">
      <scTable
        ref="table"
        :apiObj="apiObj"
        row-key="id"
        stripe
        @selection-change="handleSelection"
        @row-dblclick="handleRowDblclick"
        @expand-change="loadList"
        :row-style="rowStyle"
      >
        <el-table-column type="expand">
          <template v-slot="props">
            <el-table
              ref="innerTable"
              :data="props.row.productList"
              v-loading="!props.row.productList"
              row-key="id"
              class="innerTable"
            >
              <el-table-column
                label="产品名称"
                prop="name"
                min-width="100"
              ></el-table-column>
              <el-table-column
                label="规格型号"
                prop="specification"
                min-width="100"
              ></el-table-column>
              <el-table-column
                label="材质"
                prop="vproductMaterial"
                min-width="100"
              ></el-table-column>
              <el-table-column
                label="备注"
                prop="vproductRemark"
                min-width="100"
              ></el-table-column>
              <el-table-column
                label="合同数量"
                prop="num"
                width="100"
                v-if="props.row.source == 0"
              ></el-table-column>
              <el-table-column
                label="退货重做数量"
                prop="num"
                width="100"
                v-if="props.row.source == 1"
              ></el-table-column>
              <el-table-column
                label="已生产数量"
                prop="produceNum"
                width="100"
              ></el-table-column>
              <el-table-column
                label="发货数量"
                prop="deliverNum"
                width="100"
              ></el-table-column>
              <!-- <el-table-column
                label="排产数量"
                prop="scheduledNum"
                width="100"
              ></el-table-column> -->
              <el-table-column
                label="单位"
                prop="unitName"
                width="100"
              ></el-table-column>
              <el-table-column label="产品状态" prop="status" width="100">
                <template #default="scope">
                  <p v-if="scope.row.produceStatus == 0">未生产</p>
                  <p v-if="scope.row.produceStatus == 1" style="color: green">
                    生产中
                  </p>
                  <p v-if="scope.row.produceStatus == 2" style="color: #2bd814">
                    已完成
                  </p>
                </template>
              </el-table-column>
              <el-table-column
                label="生产设备"
                prop="equipmentCode"
                width="250"
              ></el-table-column>
              <el-table-column label="是否有外发" prop="isOut" width="100">
                <template #default="scope">
                  <p>{{ scope.row.isOut == 0 ? "否" : "是" }}</p>
                </template>
              </el-table-column>
              <!-- <el-table-column
                label="排产状态"
                prop="schedulingStatus"
                width="200"
              >
                <template #default="scope">
                  <p v-if="scope.row.schedulingStatus == 0">未排产</p>
                  <p
                    v-if="scope.row.schedulingStatus == 1"
                    style="color: green"
                  >
                    部分排产
                  </p>
                  <p
                    v-if="scope.row.schedulingStatus == 2"
                    style="color: #2bd814"
                  >
                    已完成
                  </p>
                </template>
              </el-table-column> -->
            </el-table>
          </template>
        </el-table-column>
        <el-table-column
          type="selection"
          width="55"
          :selectable="checkSelectable"
        >
        </el-table-column>
        <!-- <el-table-column label="生产单号" prop="number" width="250">
        </el-table-column> -->
        <!-- <el-table-column label="生产单名称" prop="name" min-width="200"></el-table-column> -->
        <!-- <el-table-column
          label="合同名称"
          prop="contractName"
          min-width="200"
          :show-overflow-tooltip="true"
        >
        </el-table-column> -->
        <!-- <el-table-column label="生产数量" prop="quantity" width="150">
        </el-table-column> -->
        <el-table-column label="合同编号" prop="contractCode" width="200">
        </el-table-column>
        <el-table-column label="客户名称" prop="customerName" min-width="150">
        </el-table-column>
        <el-table-column
          label="生产状态"
          prop="type"
          width="200"
          style="display: flex"
        >
          <template #default="scope">
            <span v-if="scope.row.type == 0" style="color: #f56c6c"
              >未生产</span
            >
            <span v-if="scope.row.type == 1" style="color: green">生产中</span>
            <span v-if="scope.row.type == 2" style="color: #2bd814"
              >已完成</span
            >
            <span v-if="scope.row.finishedStatus == 0">(未完成)</span>
            <span v-if="scope.row.finishedStatus == 1">(部分完成)</span>
            <span v-if="scope.row.finishedStatus == 2">(已完成)</span>
          </template>
        </el-table-column>
        <el-table-column label="生产负责人" prop="responsibleName" width="100">
        </el-table-column>
        <el-table-column label="业务员" prop="applicantName" width="100">
        </el-table-column>
        <el-table-column label="生产截止时间" prop="endTime" width="120">
          <template #default="scope">
            <p
              v-if="
                new Date().getTime() >
                  new Date(scope.row.endTime).getTime() - 48 * 60 * 60 * 1000 &&
                scope.row.type != 2
              "
              style="color: #f56c6c"
            >
              {{ scope.row.endTime }}
              <!-- <el-icon
                style="fill: #f56c6c"
                v-if="
                  new Date().getTime() >
                    new Date(scope.row.endTime).getTime() -
                      48 * 60 * 60 * 1000 && scope.row.type != 2
                "
                ><sc-icon-urgent
              /></el-icon> -->
              <img
                src="/img/urgent.png"
                alt=""
                class="icon"
                v-if="
                  new Date().getTime() >
                    new Date(scope.row.endTime).getTime() -
                      48 * 60 * 60 * 1000 && scope.row.type != 2
                "
              />
            </p>
          </template>
        </el-table-column>
        <el-table-column label="约定交货时间" prop="deliveryTime" width="120">
          <template #default="scope">
            <p
              v-if="
                new Date().getTime() >
                  new Date(scope.row.deliveryTime).getTime() -
                    48 * 60 * 60 * 1000 && scope.row.deliverStatus != 2
              "
              style="color: #f56c6c"
            >
              {{ scope.row.deliveryTime }}
              <!--   style="fill: #f56c6c" -->
              <!-- <el-icon
                v-if="
                  new Date().getTime() >
                    new Date(scope.row.deliveryTime).getTime() -
                      48 * 60 * 60 * 1000 && scope.row.deliverStatus != 2
                "
                ><sc-icon-urgent
              /></el-icon> -->
              <img
                src="/img/urgent.png"
                alt=""
                class="icon"
                v-if="
                  new Date().getTime() >
                    new Date(scope.row.deliveryTime).getTime() -
                      48 * 60 * 60 * 1000 && scope.row.deliverStatus != 2
                "
              />
            </p>
          </template>
        </el-table-column>
        <el-table-column label="合同签订时间" prop="orderTime" width="120">
        </el-table-column>
        <!-- <el-table-column label="排产状态" prop="schedulingStatus" width="200">
          <template #default="scope">
            <p v-if="scope.row.schedulingStatus == 0">未排产</p>
            <p v-if="scope.row.schedulingStatus == 1" style="color: green">
              部分排产
            </p>
            <p v-if="scope.row.schedulingStatus == 2" style="color: #2bd814">
              已完成
            </p>
          </template>
        </el-table-column> -->
        <!-- <el-table-column label="发货状态" prop="deliverStatus" width="150">
          <template #default="scope">
            <p v-if="scope.row.deliverStatus == 0">待发货</p>
            <p v-if="scope.row.deliverStatus == 1" style="color: green">
              已发货
            </p>
            <p v-if="scope.row.deliverStatus == 2" style="color: #2bd814">
              发货完成
            </p>
          </template>
        </el-table-column> -->

        <!-- <el-table-column label="来源" prop="source" width="150">
          <template #default="scope">
            <p v-if="scope.row.source == 0">合同</p>
            <p v-if="scope.row.source == 1">退货单</p>
          </template>
        </el-table-column> -->
        <el-table-column label="订单状态" prop="isAnomalous" width="100">
          <template #default="scope">
            <p v-if="scope.row.isAnomalous == 0" style="color: #2bd814">正常</p>
            <p v-if="scope.row.isAnomalous == 1" style="color: #f56c6c">异常</p>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" align="center" width="300">
          <template #default="scope">
            <el-button-group>
              <!-- finishedStatus 生产完成状态  0未完成，1部分完成 2全部完成 -->
              <el-button
                text
                type="primary"
                size="small"
                @click="table_deliver(scope.row, scope.$index)"
                v-auth-button="['send/produceOrderManagement']"
                v-if="
                  scope.row.type != 0 &&
                  scope.row.deliverStatus != 2 &&
                  scope.row.source == 0 &&
                  scope.row.finishedStatus != 0
                "
                >发货</el-button
              >
              <el-button
                text
                type="primary"
                size="small"
                @click="table_show(scope.row, scope.$index)"
                v-auth-button="['show/produceOrderManagement']"
                >查看</el-button
              >
              <el-button
                text
                type="primary"
                size="small"
                @click="table_showAll(scope.row, scope.$index)"
                >查看合同</el-button
              >
            </el-button-group>
          </template>
        </el-table-column>
      </scTable>
    </el-main>
  </el-container>

  <production-dialog
    ref="productionDialog"
    @success="handleSaveSuccess"
  ></production-dialog>

  <production-out-dialog
    ref="productionOutDialog"
    @success="handleSaveSuccess"
  ></production-out-dialog>
  <products ref="products"></products>
</template>

<script>
import productionDialog from './components/productionDialog.vue'
import productionOutDialog from './components/productionOutDialog.vue'
import products from './components/products.vue'
export default {
  name: 'produceOrderManagement',
  components: {
    productionDialog,
    productionOutDialog,
    products
  },
  data () {
    return {
      dialog: {
        show: false
      },
      apiObj: this.$API.produce.getProduceOrderList,
      searchValue: {
        search: null,
        type: '',
        customerName: '',
        startTime: '',
        endTime: '',
        businessAdminId: ''//业务员id
      },
      selection: [],
      userList: [],
      productList: [],//产品清单

    }
  },
  mounted () {
    this.getUserList()
  },
  methods: {
    async getUserList () {
      let res = await this.$API.user.getAdminList.get()
      this.userList = res.data
    },

    // 排产
    handleProduction () {
      let ids = this.selection.map(item => item.id).join(',')
      this.$router.push({
        path: '/produce/produceOrderManagement/addProduction',
        query: {
          mode: 'add',
          ids
        }
      })
      //this.$refs.productionDialog.open(this.selection)
    },

    // 外发
    handleProductionOut () {
      // this.$refs.productionOutDialog.open(this.selection)
      let ids = this.selection.map(item => item.id).join(',')
      this.$router.push({
        path: '/produce/produceOrderManagement/addProductionOut',
        query: {
          mode: 'add',
          ids
        }
      })
    },

    // 发货
    table_deliver (row) {
      // source,//来源 0合同 1退货
      this.$router.push({
        path: '/produce/produceOrderManagement/deliverAdd',
        query: {
          mode: 'add',
          produceId: row.id,
          source: 0
        }
      })
    },

    //查看
    table_show (row) {
      this.$router.push({
        path: '/produce/produceOrderManagement/produceOrderDetail',
        query: {
          id: row.id
        }
      })
      // this.$refs.products.open(row)
    },

    // 查看合同总详情
    table_showAll (row) {
      this.$router.push({
        path: '/contract/contractManagement/detailList',
        query: {
          id: row.contractId
        }
      })
    },

    // 选择生产单
    handleSelection (list) {
      this.selection = list
    },

    // 判断生产单是否可被选择
    checkSelectable (row) {
      return row.type != 2 && row.schedulingStatus != 2 && row.isAnomalous == 0
    },

    async loadList (row, expandedRows) {
      console.log(row)
      console.log(expandedRows)
      let params = {
        limit: 1000,
        page: 1,
        produceId: row.id,
      }
      if (expandedRows.length != 0) {
        let res = await this.$API.produce.produceProducts.selectProductsByProduceId.get(params)
        row.productList = res.data

      }

    },

    //搜索
    upsearch () {
      this.$refs.table.upData(this.searchValue)
    },

    //本地更新数据
    handleSaveSuccess () {
      this.$refs.table.refresh()
    },

    filterType (data) {
      let tableData = data
      tableData.forEach(item => {
        item.hasChildren = true
      })
    },

    // 双击表格
    handleRowDblclick (row) {
      this.table_show(row)
    },

    rowStyle ({ row }) {
      if (new Date().getTime() > new Date(row.deliveryTime).getTime() - 48 * 60 * 60 * 1000 && row.type != 2 && row.deliverStatus != 2) {
        // return { 'background-color': '#ff8a8a' }
        return { 'color': '#fd0000' }
      }

    },


  }
}
</script>

<style lang='scss' scoped>
.innerTable {
  padding: 10px 0;
  width: 80%;
  margin: 0 auto;
}
.icon {
  margin-right: 10px;
  width: 14px;
  height: 17px;
  vertical-align: text-bottom;
}
</style>
